<template>
	<el-dialog
		title="用户登录"
		v-elDragDialog
		:visible.sync="dialogVisible"
		append-to-body
		:show-close="true"
		:close-on-press-escape="false"
		:close-on-click-modal="false"
		custom-class="loginPagePop"
		:before-close="handleClose"
	>
		<div class="inner">
			<div class="body">
				<el-form class="form-box" :model="form" ref="form">
					<el-form-item prop="login_name" label="登录名" :rules="[{ required: true, message: '请输入员工登录名', trigger: 'blur' }]">
						<el-input v-model="form.login_name"></el-input>
					</el-form-item>
					<el-form-item prop="pwd" label="密码" :rules="[{ required: true, message: '请输入员工密码', trigger: 'blur' }]">
						<el-input type="password" v-model="form.pwd"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="onSubmit('form')" :loading="sub_load" class="login-button">登录</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import elDragDialog from '@/directives/el-drag-dialog'; // base on element-ui
import { mapState } from 'vuex';
export default {
	components: {},
	props: {
		title: {
			type: String,
			default: ''
		},
		info: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	name: 'loginPagePop',
	data() {
		return {
			dialogVisible: false,
			sub_load: false,
			userinfo: this.info,
			form: {
				login_name: 'zhangsan',
				pwd: 'yobu&123'
				// login_name: '',
				// pwd: ''
			}
		};
	},
	computed: {
		...mapState(['is_login', 'show_login'])
	},
	watch: {
		is_login: {
			handler(val) {
				if (this.$route.path == '/h5') {
					this.dialogVisible = false;
				} else {
					this.dialogVisible = !val;
				}
			},
			immediate: true
		},
		show_login: {
			handler(val) {
				this.dialogVisible = val;

				this.$nextTick(() => {
					if (this.$route.path == '/h5') {
						this.dialogVisible = false;
					}
				});
			},
			immediate: true
		}
	},
	created() {},
	methods: {
		init(data) {
			this.dialogVisible = true;
			if (data) {
				console.log({ ...data }, '----data');
				this.form = { ...data };
			}
			this.$nextTick(() => {});
		},

		onSubmit(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.sub_load = true;
					this.$api(
						'check/login',
						{
							...this.form
						},
						'post'
					).then((res) => {
						this.sub_load = false;
						if (res.code == 200) {
							let data = res.data;
							let user_info = data.user_info;
							let token = data.token;
							let uuid = data.uuid;
							this.$store.commit('set_baseInfo', user_info);
							if (token) localStorage.setItem('token', token);
							if (uuid) localStorage.setItem('uuid', uuid);
							if (user_info.id) localStorage.setItem('user_id', user_info.id);
							// if (user_info.shop_id) localStorage.setItem('shop_id', user_info.shop_id);
							this.$store.state.is_login = true;
							this.$store.state.show_login = false;
							this.handleClose();
							location.reload();
						}
					});
				}
			});
		},
		handleClose() {
			this.$emit('change');
			this.$emit('handleClose');
			this.form = {};
			this.dialogVisible = false;
			this.$store.state.show_login = false;
		}
	},
	directives: { elDragDialog }
};
</script>

<style lang="less">
.loginPagePop {
	width: fit-content !important;
	border-radius: 18px;
	overflow: hidden;
	.el-dialog__header {
		// .bor();
		// padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.el-dialog__title {
			font-weight: 600;
			text-align: center;
		}
		.el-dialog__headerbtn {
			top: 25px;
		}
	}
	.el-dialog__body {
		padding: 0;
		// max-height: 70vh;
		overflow-y: auto;
	}
	.inner {
		width: 500px;

		.head {
			padding: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #ccc;
			.title {
				font-size: 18px;
				font-weight: 600;
			}
		}
		.body {
			padding: 12px 30px;
			.form-box {
				.login-button {
					width: 100%;
					margin-top: 20px;
					height: 54px;
					background: #ff8302;
					border-radius: 10px;
					border: 1px solid #ffffff;
					font-weight: bold;
					font-size: 16px;
					color: #ffffff;
					font-style: normal;
				}
			}
		}
	}
}
</style>
